<div class="modal-header bg-primary">
    <h3 class="modal-title">
        Alert Preview <span class="label label-default"
            ng-class="{'label-danger': !!!dialog.event.read}">{{dialog.event.caseId ? 'Imported' : 'New'}}</span>
    </h3>
</div>
<div class="modal-body">
    <div class="row text-center" ng-show="dialog.loading">
        <div class="m-s">
            <i class="fa fa-3x fa-spinner fa-spin"></i>
        </div>
        Loading...
    </div>
    <div class="row" ng-hide="dialog.loading">
        <div class="col-md-12">
            <div class="alert-details">
                <h4 class="text-primary">
                    <severity value="dialog.event.severity"></severity>
                    <span>{{dialog.event.title}}</span>
                </h4>
                <div class="mt-xxs">
                    <span>
                        <strong><i class="fa fa-copy"></i> ID: </strong>
                        <span class="clickable"><a
                                ng-click="dialog.copyId(dialog.event._id)">{{dialog.event._id}}</a></span>
                    </span>
                    <span class="ml-xxs">
                        <strong><i class="fa fa-calendar"></i> Date: </strong>
                        <span>{{dialog.event.date | shortDate}}</span>
                    </span>
                    <span class="ml-xxs">
                        <strong><i class="fa fa-certificate"></i> Type: </strong>
                        <span>{{dialog.event.type}}</span>
                    </span>
                    <span class="ml-xxs">
                        <strong><i class="fa fa-barcode"></i> Reference: </strong>
                        <span>{{dialog.event.sourceRef}}</span>
                    </span>
                    <span class="ml-xxs">
                        <strong><i class="fa fa-bullseye"></i> Source: </strong>
                        <span>{{dialog.event.source}}</span>
                    </span>
                </div>
                <!-- <div class="case-tags flexwrap mt-xxs">
                    <strong><i class="fa fa-tags mr-xxxs"></i></strong>
                    <strong class="text-muted mr-xxxs"
                        ng-if="!dialog.event.tags || dialog.event.tags.length === 0">None</strong>
                    <tag-item ng-repeat="tag in dialog.event.tags track by $index" value="tag"></tag-item>
                </div> -->

                <div class="mt-xs">
                    <h4 class="vpad10 text-primary">
                        Basic Information
                    </h4>
                    <dl class="dl-horizontal">
                        <dt class="pull-left">Tags</dt>
                        <dd ng-if="dialog.canEdit && !dialog.readonly">
                            <updatable-tag-list on-update="dialog.updateField('tags', dialog.getTags(newValue))"
                                value="dialog.event.tags" source="dialog.getAlertTags"></updatable-tag-list>
                        </dd>
                        <dd ng-if="!dialog.canEdit || dialog.readonly">
                            <tag-list data="dialog.event.tags"></tag-list>
                        </dd>
                    </dl>
                </div>

                <div class="mt-xs">
                    <h4 class="vpad10 text-primary">
                        Description
                    </h4>
                    <div class="description-pane" ng-if="!dialog.canEdit || dialog.readonly">
                        <div marked="dialog.event.description" class="markdown"></div>
                    </div>

                    <div class="description-pane" ng-if="dialog.canEdit && !dialog.readonly">
                        <updatable-text on-update="dialog.updateField('description', newValue)"
                            value="dialog.event.description"></updatable-text>
                    </div>
                </div>

                <div class="mt-xs">
                    <h4 class="vpad10 text-primary">
                        Additional fields

                        <span uib-dropdown class="ml-m">
                            <a href class="dropdown-toggle" uib-dropdown-toggle>
                                <small><i class="fa fa-columns"></i> Layout</small>
                            </a>
                            <ul class="dropdown-menu scroll-dropdown" uib-dropdown-menu>
                                <li ng-class="{'active': appLayout.alertCustomFieldColumns === 1}">
                                    <a ng-click="layoutSrv.alertCustomFields(1)">1 column</a>
                                </li>
                                <li ng-class="{'active': appLayout.alertCustomFieldColumns === 2}">
                                    <a ng-click="layoutSrv.alertCustomFields(2)">2 columns</a>
                                </li>
                                <li ng-class="{'active': appLayout.alertCustomFieldColumns === 3}">
                                    <a ng-click="layoutSrv.alertCustomFields(3)">3 columns</a>
                                </li>
                            </ul>
                        </span>
                    </h4>
                    <div ng-include="'views/partials/alert/custom.fields.html'"></div>
                </div>
            </div>


            <uib-tabset active="active" class="mt-xs nav-tabs-custom">
                <uib-tab index="0">
                    <uib-tab-heading>
                        <span>
                            <i class="mr-xxs glyphicon glyphicon-pushpin"></i>
                            Observables <span class="ml-xxs badge">{{dialog.counts.observables}}</span>
                        </span>
                    </uib-tab-heading>
                    <div>
                        <alert-observable-list alert-id="dialog.eventId"
                            on-list-load="dialog.updateObservableCount(count)"></alert-observable-list>
                    </div>
                </uib-tab>
                <uib-tab index="1">
                    <uib-tab-heading>
                        <span>
                            <i class="mr-xxs glyphicon glyphicon-link"></i>
                            Similar cases <span class="ml-xxs badge">{{dialog.counts.similarCases}}</span>
                        </span>
                    </uib-tab-heading>
                    <div>
                        <alert-similar-case-list alert-id="dialog.event._id" readonly="dialog.readonly"
                            on-list-load="dialog.updateSimilarCasesCount(count)"
                            on-merge-into-case="dialog.mergeIntoCase(caseId)"></alert-similar-case-list>
                    </div>
                </uib-tab>
            </uib-tabset>

        </div>
    </div>

</div>
<div class="modal-footer text-left">
    <button class="btn btn-default" ng-click="dialog.cancel()" type="button">Cancel</button>



    <button class="btn btn-default" type="button" ng-if="dialog.canMarkAsRead(dialog.event) && !dialog.readonly"
        ng-disabled="dialog.loading" ng-click="dialog.markAsRead(dialog.event)">
        <i class="fa fa-envelope"></i> Mark as read
    </button>
    <button class="btn btn-default" type="button" ng-if="dialog.canMarkAsUnread(dialog.event) && !dialog.readonly"
        ng-disabled="dialog.loading" ng-click="dialog.markAsRead(dialog.event)">
        <i class="fa fa-envelope-open-o"></i> Mark as unread
    </button>

    <button class="btn btn-default" type="button" ng-if="!dialog.readonly" ng-disabled="dialog.loading"
        ng-click="dialog.follow()">
        <i class="fa" ng-class="{'fa-eye': dialog.event.follow, 'fa-eye-slash': !dialog.event.follow}"></i>
        {{dialog.event.follow ? 'Ignore new updates' : 'Track new updates'}}
    </button>

    <button class="btn btn-default" type="button" ng-if="!dialog.readonly" ng-disabled="dialog.loading"
        ng-click="dialog.merge()">
        <i class="fa fa-compress"></i> Merge into case
    </button>

    <button ng-if="!dialog.readonly" class="btn btn-danger" type="button" ng-disabled="dialog.loading"
        ng-click="dialog.delete()">
        <i class="fa fa-trash"></i> Delete
    </button>

    <form ng-if="!dialog.readonly" name="eventForm" class="form-horizontal pull-right mr-xs" style="width:450px;"
        ng-submit="dialog.import()">
        <div class="form-group">
            <label class="col-sm-4 control-label">Import alert as</label>
            <div class="col-sm-8 input-group">
                <select class="form-control" ng-model="dialog.event.caseTemplate"
                    ng-options="template for template in dialog.templates | orderBy:displayName | orderBy:name">
                    <option value="" ng-if="dialog.templates.length === 0 || !!!dialog.hideEmptyCaseButton">-- Empty
                        case --
                    </option>
                </select>
                <span class="input-group-btn">
                    <button class="btn btn-primary" type="submit"
                        ng-disabled="dialog.loading || (!dialog.event.caseTemplate && !!dialog.hideEmptyCaseButton && dialog.templates.length > 0)"><i
                            class="fa fa-download"></i> Yes, Import</button>
                </span>
            </div>

        </div>
    </form>

    <!-- <div class="btn-group pull-right dropup" ng-disabled="dialog.loading">
        <button type="button" class="btn btn-primary">Import event</button>
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
      </button>
        <ul class="dropdown-menu">
            <li ng-repeat="tpl in dialog.templates">
                <a href>{{tpl}}</a>
            </li>
        </ul>
    </div> -->

</div>
